<template>
  <div class="fr icon">
    <svg width="2rem" height="2rem" version="1.1"
         xmlns="http://www.w3.org/2000/svg" ref="svg" @click="playOrPause()">
      <circle r="0.9rem" :stroke="stroke" cx="1rem" cy="1rem"
              stroke-width="0.1rem" fill="none"/>
      <path v-show="!playing" name="三角形" fill="none" stroke="black" stroke-width="0.1rem" ref="path"/>
      <circle r="0.9rem" stroke="red" cx="1rem" cy="1rem" ref="circleProgress"
              stroke-width="0.1rem" fill="none" class="red" :stroke-dasharray="dashArray"/>
    </svg>
    <span v-show="playing" class="left"></span>
    <span v-show="playing" class="right"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data() {
      return {
        dashArray: ''
      }
    },
    props: {
      percent: Number,
      playing: false,
      fullScreen: false
    },
    created() {
      this.stroke = '#000'
      this.flag = true
      this.getSvg = false
    },
    methods: {
      getPerimeter() {
        let svgHeight = this.$refs.svg.clientHeight
        this.$refs.circleProgress.style.transform = `matrix(0,-1,1,0,0,${svgHeight})`
        let r = 0.9 * svgHeight / 2
        this.perimeter = Math.PI * 2 * r
      },
      setDashArray(newPercent) {
        this.dashArray = this.perimeter * newPercent + ' ' + this.perimeter * (1 - newPercent)
      },
      playOrPause() {
        this.$emit('togglePlaying')
      },
      setD() {
        let svgW = this.$refs.svg.clientWidth
        let p = svgW / 2
        let tH = svgW / 3
        let tW = Math.sqrt(tH * tH * 3 / 4)
        let MY = (svgW - tH) / 2
        let MX = (svgW - tW) / 2 + 0.1 * p
        let LX1 = MX + tW
        let LY1 = MY + tH / 2
        let LX2 = MX
        let LY2 = MY + tH
        let d = `M${MX} ${MY} L${LX1} ${LY1} L${LX2} ${LY2} Z`
        this.$refs.path.setAttribute('d', d)
      }
    },
    watch: {
      percent(newPercent) {
        if (!this.fullScreen && newPercent >= 0) {
          if (this.flag) {
            this.getPerimeter()
            this.flag = false
          }
          this.setDashArray(newPercent)
        }
      },
      fullScreen() {
        if (!this.fullScreen && !this.getSvg) {
          this.setD()
          this.getSvg = true
        }
      }
    }
  }
</script>

<style>

</style>
